<!-- 面材资料建档：蹇泽阳 -->
<template>
  <div class="app-container">
    <div class="flex" style="justify-content: flex-start; flex-wrap: wrap">
      <JFind :className="'find1'" :searchTitle="'分类资料查询条件'" :formList="formList" @findClicked="findClicked" @selectChange="selectChange" />
      <JFind
        :className="'find2'"
        :searchTitle="'材料查询条件'"
        :OriginalFilter="{ static: true }"
        :formList="formList2"
        @findClicked="findClicked2"
        @clickNumber1="clickNumber1"
      />
    </div>
    <div class="flex mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <div slot="header" class="f16">
          <span style="font-weight: 600">分类资料</span>
        </div>
        <Table :tableHeader="tableHeader" :tableData="tableData" :isLoading="isLoading" @currentRow="currentRow" :outTableHeight="80" />
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" style="width: 400px">
        <div slot="header" class="f16">
          <span style="font-weight: 600">材料属性(红色为必填)</span>
        </div>
        <JTable
          style="width: 100%"
          :tableHeader="tableHeader1"
          :tableData="tableData2"
          :getTableList="currentRow"
          @confirmChange="confirmChange"
          :outTableHeight="280"
        />
        <div class="flex" style="flex-direction: column; align-items: center">
          <div>英文名称</div>
          <el-input v-model="english" placeholder="" clearable></el-input>
          <div>中文名称</div>
          <el-input v-model="assembly" placeholder="" type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" clearable disabled></el-input>
        </div>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <div slot="header" class="f16">
          <span style="font-weight: 600">材料查询</span>
        </div>
        <Table
          :tableHeader="tableHeader3"
          :tableData="tableData3"
          :isLoading="isLoading3"
          :outTableHeight="80"
          @currentRow="currentRow3"
          :getTableList="getTableList3"
          @confirmChange="confirmChange3"
          @currentRow1="dbClickTableRow"
        />
      </el-card>
    </div>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>

    <el-dialog v-model="dialogVisible" title="修改材料">
      <div>原材料信息</div>
      <Find :OriginalFilter="{ static: true }" :formList="formList3" :searchImg="false"></Find>

      <div class="mt24">新材料信息</div>
      <Find :OriginalFilter="{ static: true }" :formList="formList4" :searchImg="false"></Find>

      <div class="mt10">
        <el-button type="primary" class="primaryBth" @click="comfirmChange">确认修改</el-button>
        <el-button type="primary" class="primaryBth" @click="dialogVisible = false">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'SurfaceMaterialDataFile1'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { selectList, selectSomeList } from '@/plugins/mixin'
import LoginWork from '@/utils/LoginWork'
import service from '@/utils/request'
import { ElMessage } from 'element-plus'
import { debounce } from 'lodash'
import { onMounted, ref, watch } from 'vue'
const dialogVisible = ref(false)
const assembly = ref('')
const english = ref('') // 英文名称

const formList = ref<any>([
  {
    type: 'select',
    selectValue: '',
    selectP: '大类',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '中类',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '小类',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '组合材料'
  },
  {
    type: 'button',
    checkboxLabel: '插入材料',
    bgColor: '#67C23A'
  },
  {
    type: 'button',
    checkboxLabel: '转物料属性定义'
  }
])
const formList2 = ref<any>([
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称2',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称3',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入物料编码',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入宽幅',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入单位',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '供应商',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入建档用户',
    inputValue: ''
  },
  {
    type: 'radio1',
    checkboxLabel: '未审核',
    checked: false,
    label: '3'
  },
  {
    type: 'radio1',
    checkboxLabel: '已审核',
    checked: false,
    label: '1'
  },
  {
    type: 'radio1',
    checkboxLabel: '退回',
    checked: false,
    label: '2'
  },
  {
    type: 'radio1',
    checkboxLabel: '全部',
    checked: true,
    label: '0'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '删除当前行'
  }
])
const tableHeader = ref([
  {
    label: '大类',
    prop: 'typeName'
  },
  {
    label: '中类',
    prop: 'typeName2'
  },
  {
    label: '小类',
    prop: 'typeName3'
  }
])
// 表一模块
// 置空按钮
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '组合材料') {
    // let str = ''
    // for (let index = 0; index < tableData2.value.length - 3; index++) {
    //   // 不是拼接的
    //   if (tableData2.value[index].mtlProperty2.indexOf('  ') == -1 && tableData2.value[index].mtlProperty2) {
    //     str = str + tableData2.value[index].mtlProperty2 + ' '
    //   } else if (tableData2.value[index].mtlProperty2) {
    //     str = str + tableData2.value[index].mtlProperty2.split('  ')[1] + ' '
    //   }
    // }
    // assembly.value = str
    const list = tableData2.value.filter((item: any) => {
      if (item.mtlProperty === '供应商' || item.mtlProperty === '单位' || item.mtlProperty === '宽幅') {
        return false
      } else {
        return true
      }
    })
    let res = await LoginWork.post<any, any>(`/date/getMaterialPropertiesIn`, list)
    if (res.code === 200) {
      JMessage.success(res.message)
      assembly.value = res.data.mtlProperty
    } else {
      JMessage.warning(res.message)
    }
  }
  if (content === '插入材料') {
    // 厚度 编号 克重 纹路 宽幅 单位 选，
    const list = tableData2.value.filter((item: any) => {
      if (item.mtlProperty === '供应商' || item.mtlProperty === '单位' || item.mtlProperty === '宽幅') {
        return false
      } else {
        return true
      }
    })
    const mtlSpec = tableData2.value.find((item: any) => item.mtlProperty === '宽幅').mtlProperty2
      ? tableData2.value.find((item: any) => item.mtlProperty === '宽幅').mtlProperty2
      : null
    const vendor = tableData2.value.find((item: any) => item.mtlProperty === '供应商').mtlProperty2
      ? tableData2.value.find((item: any) => item.mtlProperty === '供应商').mtlProperty2.split('  ')[0]
      : null
    let res = await LoginWork.post<any, any>(`/date/getMaterialPropertiesAdd`, {
      engName: english.value, // 英文名称
      list,
      mtlName: assembly.value, // 中文名称
      mtlSpec, // 宽幅
      mtlUnit: tableData2.value.find((item: any) => item.mtlProperty === '单位').mtlProperty2.split('  ')[0], // 单位
      vendor, // 供应商
      typeNo3: currentTypeNo3.value // 小类代码
    })
    if (res.code === 200) {
      JMessage.success(res.message)
      getTableList3()
    } else {
      JMessage.error(res.message)
    }
    // currentRow(currentTableRow.value)
  }
}
const findClicked2 = async (content: string) => {
  if (content === '置空') {
    formList2.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '删除当前行') {
    const res = await LoginWork.get<any, any>('/date/getMaterialPropertiesDel', {
      params: {
        mtlNo: currentRow3MtlNo.value
      }
    })
    if (res.code === 200) {
      JMessage.success(res.message)
      getTableList3()
    } else {
      JMessage.warning(res.message)
    }
  }
}
const tableData = ref([])
const isLoading = ref(true)
// 获取表数据
const getTableList = debounce(async () => {
  const big = formList.value.find(
    (item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '大类'
  ).selectValue
  const mid = formList.value.find(
    (item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '中类'
  ).selectValue
  const small = formList.value.find(
    (item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '小类'
  ).selectValue
  isLoading.value = true
  let tableDataList = await service.post<any, any>('/date/getClassification', {
    typeNo: big ? big.split('  ')[0] : '',
    typeNo2: mid ? mid.split('  ')[0] : '',
    typeNo3: small ? small.split('  ')[0] : ''
  })
  isLoading.value = false
  tableData.value = tableDataList
  currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
const tableData2 = ref<any>([])
const currentTypeNo3 = ref([])
// 点击表给另一张表传数据
const currentTableRow = ref({})
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  currentTableRow.value = row
  let { typeNo, typeNo2, typeNo3 }: any = row
  currentTypeNo3.value = typeNo3
  // 给表二传指令号
  let table2Data = await service.post<any, any>(`/date/getMaterialProperties`, {
    typeNo,
    typeNo2,
    typeNo3
  })
  table2Data.typeDetailList.push(
    {
      mtlProperty: '宽幅'
    },
    {
      mtlProperty: '单位',
      propertyNeed: 'Y'
    },
    {
      mtlProperty: '供应商'
    }
  )
  tableData2.value = table2Data.typeDetailList.map((item: any) => {
    item.disableConfirm = true
    item.options = []
    item.propertyNeed === 'Y' ? (item.backgroundColor = '#FF0000') : (item.backgroundColor = 'white')
    // 添加表格中下拉框数据
    getSelectList6(item)
    if (item.mtlProperty !== '材质') {
      item.addAndUpdate = true
    } else {
      item.type = 'input'
    }
    return item
  })
}
const tableHeader1 = ref([
  {
    label: '物料属性',
    prop: 'mtlProperty',
    backgroundColor: true,
    width: 75
  },
  {
    allowCreate: true,
    label: '属性规格',
    prop: 'mtlProperty2',
    type: 'selectR'
  }
])
// 获取表二下拉框数据（下拉框接口是数组对象）
const getSelectList6 = async (row: any) => {
  if (row.mtlProperty === '宽幅') {
    let res = await service.get<any, any>('/MaterialManagement/getWideDefinitionList')
    res.map((Vendor: any) => {
      row.options.push({
        label: Vendor.mtlSpec,
        value: `${Vendor.mtlSpec}`
      })
    })
  } else if (row.mtlProperty === '单位') {
    let res = await service.get<any, any>('/MaterialManagement/getUnitList')
    res.map((Vendor: any) => {
      row.options.push({
        label: Vendor.mtlUnit,
        LeftLabel: `${Vendor.mtlUnit}`,
        RightLabel: `${Vendor.sortNo ? Vendor.sortNo : ''}`,
        value: `${Vendor.mtlUnit}  ${Vendor.mtlSeq}  ${Vendor.engMtlUnit}  ${Vendor.sortNo}`
      })
    })
  } else if (row.mtlProperty === '供应商') {
    let res = await service.get<any, any>('/back/getVendorCompanyName')
    res.map((Vendor: any) => {
      row.options.push({
        label: Vendor.vendorName,
        LeftLabel: `${Vendor.vendorName}`,
        RightLabel: `${Vendor.vendorNo}`,
        value: `${Vendor.vendorName}  ${Vendor.vendorNo}`
      })
    })
  } else {
    const res = await service.get<any, any>('/MaterialManagement/getMaterialPropertiesSpecsList', {
      params: {
        mtlProperty: row.mtlProperty
      }
    })
    res.map((Vendor: any) => {
      row.options.push({
        label: Vendor.mtlSpec,
        LeftLabel: `${Vendor.mtlSpec}`,
        RightLabel: `${Vendor.sortNo ? Vendor.sortNo : ''}`,
        value: `${Vendor.mtlSpec}`
        // value: `${Vendor.mtlSeq}  ${Vendor.mtlSpec}  ${Vendor.sortNo}`
      })
    })
  }
}

const confirmChange = (row: any, fn: any, current: any) => {
  document.querySelectorAll('.el-input__inner').forEach((item: any) => item.blur())
}

// 表三模块
const tableData3 = ref([])
const tableHeader3 = ref([
  {
    backgroundColor: true,
    label: '物料编码',
    prop: 'mtlNo',
    change: true
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    width: 300,
    change: true
  },
  {
    label: '英文名称',
    prop: 'engName',
    width: 250
  },
  {
    label: '宽幅',
    prop: 'mtlSpec',
    change: true
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    change: true
  },
  {
    label: '供应商',
    prop: 'vendor',
    type: 'select'
  },
  {
    label: '建档用户',
    prop: 'sysUser',
    change: true
  },
  {
    type: 'dateSingle',
    label: '失效日期',
    prop: 'uneffectDate',
    width: 110
  }
])
const isLoading3 = ref(true)
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList3()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList3()
}
const status = ref('0')
const clickNumber1 = (val: string) => {
  status.value = val
  getTableList3()
}
// 获取表数据
const getTableList3 = debounce(async () => {
  isLoading3.value = true
  let tableDataList = await service.post<any, any>('/date/getMaterialQueryList', {
    mtlName: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料名称'
    )?.inputValue, // 材料名称
    mtlName2: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料名称2'
    )?.inputValue, // 材料名称
    mtlName3: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料名称3'
    )?.inputValue, // 材料名称
    mtlNo: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入物料编码'
    )?.inputValue, // 物料编码
    mtlSpec: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入宽幅'
    )?.inputValue, // 宽幅
    mtlUnit: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入单位'
    )?.inputValue, // 单位
    sysUser: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入建档用户'
    )?.inputValue, // 建档用户
    vendor: formList2.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '供应商')
      ?.selectValue, // 供应商
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    status: status.value
  })
  isLoading3.value = false
  tableData3.value = tableDataList.materialQueryList.map((item: any) => {
    item.change = true
    item.vendor = {
      selectValue: item.vendor || ' ',
      options: []
    }
    item.uneffectDate = item.uneffectDate || ''
    if (item.status === '1') {
      tableHeader3.value.forEach((item: any) => (item.change = true))
      item.backgroundColor = '#67C23A'
    } else if (item.status === '2') {
      tableHeader3.value.forEach((item: any) => (item.change = false))
      item.backgroundColor = '#FF0000'
    } else {
      tableHeader3.value.forEach((item: any) => (item.change = false))
    }
    return item
  })
  total.value = tableDataList.total
}, 500)
// 获取宽幅下拉框数据（下拉框接口是数组字符串）
const getSelectList4 = async (row: any) => {
  let res = await service.get<any, any>('/MaterialManagement/getWideDefinitionList')
  res.map((Vendor: any) => {
    row.vendor.options.push({
      label: Vendor.mtlSpec,
      LeftLabel: `${Vendor.mtlSpec}`,
      RightLabel: `${Vendor.sortNo ? Vendor.sortNo : ''}`,
      value: `${Vendor.mtlSeq}  ${Vendor.mtlSpec}  ${Vendor.sortNo}`
    })
  })
}
// 获取表三中供应商下拉框数据（下拉框接口是数组字符串）
const getSelectList5 = async (row: any) => {
  let res = await service.get<any, any>('/back/vendorQuery')
  res.map((Vendor: any) => {
    row.vendor.options.push({
      label: Vendor.vendorName,
      LeftLabel: `${Vendor.vendorName}`,
      RightLabel: `${Vendor.vendorNo}`,
      value: `${Vendor.vendorName}  ${Vendor.vendorNo}`
    })
  })
}
onMounted(() => {
  getTableList3()
})
watch(formList2.value, () => {
  getTableList3()
})
// 修改确认函数
const confirmChange3 = async (row: any, fn: any, current: any) => {
  if (row.status === '1') {
    JMessage.error('该物料已审核，无法修改')
    return
  }
  const copyRow = JSON.parse(JSON.stringify(row))
  const { engName, mtlNo, uneffectDate, vendor } = copyRow
  let res = await LoginWork.put<any, any>('/date/getMaterialPropertiesUpdate', {
    engName,
    mtlNo,
    uneffectDate: uneffectDate,
    vendor: vendor.selectValue.split('  ')[0]
  })
  if (res.code === 200) {
    JMessage.success('修改成功')
    fn()
  } else {
    JMessage.error(res.message)
  }
}
// 点击表三
const currentRow3MtlNo = ref()
const currentRow3 = async (row: any) => {
  const { mtlNo } = row
  currentRow3MtlNo.value = mtlNo
  getSelectList5(row)
}

// 获取 大类 中类 小类 下拉框数据
const getSelectList = async (mid: any = '', small: any = '') => {
  let res = await service.get<any, any>('/back/mtlTypeLMSQuery', {
    params: {
      mtlType: small ? small : mid
    }
  })
  if (small) {
    formList.value
      .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '小类')
      ?.selectOptions.splice(0)
    res.forEach((item: any, index: any) => {
      formList.value
        .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '小类')
        ?.selectOptions?.push({
          optionKey: index,
          optionValue: `${item.typeName}  ${item.typeNo}`,
          optionLabel: `${item.typeName}`,
          LeftLabel: `${item.typeName}`,
          RightLabel: `${item.typeNo}`
        })
    })
  } else if (mid) {
    formList.value
      .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '中类')
      ?.selectOptions.splice(0)
    res.forEach((item: any, index: any) => {
      formList.value
        .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '中类')
        ?.selectOptions?.push({
          optionKey: `${item.typeName}  ${item.typeNo}`,
          optionValue: `${item.typeName}  ${item.typeNo}`,
          optionLabel: `${item.typeName}`,
          LeftLabel: `${item.typeName}`,
          RightLabel: `${item.typeNo}`
        })
    })
  } else {
    formList.value
      .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '大类')
      ?.selectOptions.splice(0)
    res.forEach((item: any, index: any) => {
      formList.value
        .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '大类')
        ?.selectOptions?.push({
          optionKey: index,
          optionValue: `${item.typeName}  ${item.typeNo}`,
          optionLabel: `${item.typeName}`,
          LeftLabel: `${item.typeName}`,
          RightLabel: `${item.typeNo}`
        })
    })
  }
}
// 获取供应商下拉框数据
const getVendorList = async () => {
  let vendorName = await service.get<any, any>('/back/vendorQuery')
  let vendorNames = formList2.value.find(
    (item: any) => item.type === 'select' && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '供应商'
  ) as any
  // 插入供应商
  if (vendorName && vendorNames) {
    vendorName.forEach((item: any, index: any) => {
      if (item === null) return
      vendorNames.selectOptions?.push({
        optionKey: index,
        optionValue: `${item.vendorName}`,
        optionLabel: `${item.vendorName}`,
        LeftLabel: `${item.vendorName}`,
        RightLabel: `${item.vendorNo}`
      })
    })
  }
}
onMounted(() => {
  getSelectList()
  getVendorList()
})
const selectChange = (val: any, selectP: any) => {
  console.log(selectP)

  if (selectP === '大类') {
    getSelectList(formList.value[0].selectValue.split('  ')[1])
  }
  if (selectP === '中类') {
    getSelectList('', formList.value[1].selectValue.split('  ')[1])
  }
}

const formList3 = ref([
  {
    type: 'input',
    inputLabel: '材料名称',
    inputPlaceholder: '',
    inputValue: '',
    inputDisabled: true,
    inputWidth: '220px !important'
  },
  {
    type: 'input',
    inputLabel: '宽幅',
    inputPlaceholder: '',
    inputValue: '',
    inputDisabled: true,
    inputWidth: '80px !important'
  },
  {
    type: 'input',
    inputLabel: '单位',
    inputPlaceholder: '',
    inputValue: '',
    inputDisabled: true,
    inputWidth: '80px !important'
  }
])
const formList4 = ref<any>([
  {
    inputWidth: '400px',
    type: 'input',
    inputLabel: '材料名称',
    inputPlaceholder: '',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '宽幅',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '单位',
    selectLabel: '',
    selectOptions: []
  }
])
const dbClickTableRow = async (row: any) => {
  const { mtlName, mtlSpec, mtlUnit } = row
  dialogVisible.value = true
  formList3.value[0].inputValue = mtlName
  formList4.value[0].inputValue = mtlName
  formList3.value[1].inputValue = mtlSpec
  formList4.value[1].selectValue = mtlSpec
  formList3.value[2].inputValue = mtlUnit
  formList4.value[2].selectValue = mtlUnit
  let res = await service.get<any, any>('/MaterialManagement/getWideDefinitionList')
  res.map((Vendor: any, index: number) => {
    formList4.value[1].selectOptions.push({
      optionKey: index,
      optionLabel: Vendor.mtlSpec,
      LeftLabel: `${Vendor.mtlSpec}`,
      RightLabel: `${Vendor.sortNo ? Vendor.sortNo : ''}`,
      optionValue: `${Vendor.mtlSpec}`
    })
  })
  let res2 = await service.get<any, any>('/MaterialManagement/getUnitList')
  res2.map((Vendor: any, index: number) => {
    formList4.value[2].selectOptions.push({
      optionKey: index,
      optionLabel: Vendor.mtlUnit,
      LeftLabel: `${Vendor.mtlUnit}`,
      RightLabel: `${Vendor.sortNo ? Vendor.sortNo : ''}`,
      optionValue: `${Vendor.mtlUnit}`
    })
  })
}
const comfirmChange = async () => {
  let res = await LoginWork.put<any, any>('/date/getMaterialProperties2Update', {
    updateTop: {
      mtlNo: currentRow3MtlNo.value,
      mtlName: formList3.value[0].inputValue,
      mtlSpec: formList3.value[1].inputValue,
      mtlUnit: formList3.value[2].inputValue
    },
    updateEnd: {
      mtlNo: currentRow3MtlNo.value,
      mtlName: formList4.value[0].inputValue,
      mtlSpec: formList4.value[1].selectValue,
      mtlUnit: formList4.value[2].selectValue
    }
  })
  if (res.code === 200) {
    JMessage.success('修改成功')
    dialogVisible.value = false
    getTableList3()
  } else {
    JMessage.error(res.message)
  }
}
</script>

<style lang="less" scoped>
:deep(.find1) {
  width: 100%;
}
:deep(.find2) {
  width: 100%;
}
:deep(.find2 .el-form-item:nth-child(4)) {
  .el-input {
    width: 147px;
  }
}
:deep(.find2 .el-form-item:nth-child(5)) {
  .el-input {
    width: 147px;
  }
}
:deep(.find2 .el-form-item:nth-child(6)) {
  .el-input {
    width: 147px;
  }
}
:deep(.el-form-item:nth-child(1)) {
  .el-select {
    width: 135px;
    height: 28px;
  }
}

:deep(.el-form-item:nth-child(2)) {
  .el-select {
    width: 135px;
    height: 28px;
  }
}

:deep(.el-form-item:nth-child(3)) {
  .el-select {
    width: 135px;
    height: 28px;
  }
}

:deep(.el-form-item:nth-last-child(2)) {
  .el-select {
    width: 140px;
    height: 28px;
  }
}

h1 {
  font-size: 16px;
}
</style>
<style>
.app-main {
  background-color: white !important;
}
</style>
